<template>
  <el-drawer
    ref="drawerBox"
    v-bind="$attrs"
    :wrapper-closable="true"
    :close-on-press-escape="false"
    :title="title"
    :size="showMobilePage?'100%':'80%'"
    append-to-body
    v-on="$listeners"
  >
    <div class="drawer-content">
      <filter-input
        v-if="!isOtherTab"
        v-model="paramsObj"
        :filter-list="filterList"
        line-feed
        show-search-btn
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"
      />
      <el-form v-else :inline="true" :model="otherParams" :class="{'mobile-top-filter': showMobilePage}" size="small">
        <el-form-item label="付款人名称">
          <el-input
            v-model="otherParams.clientName"
            class="width240"
            placeholder="请输入"
            clearable
            @keyup.enter.native="handleOtherEnter"/>
        </el-form-item>
        <el-form-item label="收入金额">
          <el-input
            v-only-number="{max: 999999999999 ,min: -999999999999, precision: 3, enableNull: true}"
            v-model="otherParams.incomeAmount"
            class="width120"
            type="number"
            oninput="if(value>999999999999)value=999999999999"
            placeholder="精确到小数点"
            clearable
            @keyup.enter.native="handleOtherEnter"/>
        </el-form-item>
        <el-form-item label="到账日期" style="margin-right: 12px !important">
          <el-date-picker
            v-model="otherParams.arrivalTime"
            :clearable="false"
            :editable="false"
            class="width120"
            type="date"
            size="small"
            value-format="timestamp"
            format="yyyy/MM/dd"
            placeholder="选择日期" />
        </el-form-item>
        <el-form-item>
          <template v-if="showMobilePage">
            <el-button :disabled="searchOtherDisabled" type="primary" @click="handleOtherSearch">搜索</el-button>
            <el-button @click="resetOtherSearch">重置</el-button>
          </template>
          <template v-else>
            <el-button :disabled="searchOtherDisabled" type="primary" style="width: 40px; height: 32px; padding: 0" @click="handleOtherSearch">
              <img :src="searchIcon" width="16px" height="16px" alt="" style="filter: brightness(999);">
            </el-button>
            <div style="display: inline-block; cursor: pointer; margin-left: 10px;" @click="resetOtherSearch">
              <el-tooltip :open-delay="500" content="重置筛选" placement="top">
                <img :src="resetFilterIcon" width="16px" height="16px" alt="">
              </el-tooltip>
            </div>
          </template>
        </el-form-item>
      </el-form>
      <el-tabs v-if="multiple" v-model="curTabName" type="card" class="detail-tabs-container" style="margin: 8px 0" @tab-click="checkSelectTab">
        <el-tab-pane label="可见流水" name="all"/>
        <el-tab-pane name="other">
          <span slot="label">不可见流水</span>
        </el-tab-pane>
        <el-tab-pane name="selected">
          <span slot="label">已选择流水<el-badge v-if="selectedData.length" :value="selectedData.length" /></span>
        </el-tab-pane>
      </el-tabs>
      <div :style="multiple?'':{marginTop: '17px'}" class="table-list">
        <div v-loading="listLoading">
          <u-table
            v-if="(isAllTab && list.items.length > 0) || (isOtherTab && otherList.items.length) || (isSelectedTab && selectedData.length > 0)"
            ref="dayAccountTable"
            :data="isAllTab?list.items:(isOtherTab?otherList.items:selectedTableData)"
            :row-class-name="tableRowClassName"
            :height="setTableHeight"
            :row-height="49"
            :border="true"
            :default-sort="{prop: 'arrivalTime', order: 'descending'}"
            beautify-table
            header-drag-style
            use-virtual
            element-loading-text="加载中..."
            header-cell-class-name="order-data-header-cell"
            class="fb-table"
            empty-text="暂无数据"
            fit
            hightlight-current-row
            @select="selectTable"
            @select-all="selectTable"
            @sort-change="sortMethod">
            <u-table-column
              align="center"
              fixed="left"
              type="selection"
              width="50"/>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="left" label="到账日期" min-width="100" prop="arrivalTime">
              <template slot-scope="scope">
                {{ scope.row.arrivalTime | standardFormat('YYYY/MM/DD') }}
              </template>
            </u-table-column>
            <u-table-column align="left" label="交易单号" min-width="120">
              <template slot-scope="scope">
                <el-tooltip v-if="scope.row.transactionNumber" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ scope.row.transactionNumber }}</div>
                  <div v-if="isAllTab" class="ellipsis pointer" style="color:#406eff;" @click="btnCheck(scope)">{{ scope.row.transactionNumber }}</div>
                  <ToolTip v-else :content="scope.row.transactionNumber"/>
                </el-tooltip>
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="right" label="收入金额(元)" min-width="130" prop="incomeAmount">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.incomeAmount" :price="scope.row.incomeAmount / 100" />
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="right" label="可核销金额(元)" min-width="140" prop="unWriteOffAmount">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.unWriteOffAmount" :price="scope.row.unWriteOffAmount / 100" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="付款人名称" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.payName"/>
              </template>
            </u-table-column>
            <u-table-column align="left" label="付款账号" min-width="120">
              <template slot-scope="scope">
                <SecretText :log-text="`财务流水${scope.row.flowNumber}的付款账号`" :origin-text="scope.row.payNumber" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="付款方式" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="getPayWay(scope.row)" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="核销状态" min-width="100">
              <template slot-scope="scope">
                <StatusText :color="['#31CC9C','#406EFF', '#FD8546', '#FB5227'][scope.row.verificationState]" :text="scope.row.verificationState | setVerificationState" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="封账状态" min-width="100">
              <template slot-scope="scope">
                <StatusText :color="['#fd8546','#31cc9c', '#fd8546'][scope.row.sealingState]" :text="scope.row.sealingState | setSealBillType" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="备注" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.remark"/>
              </template>
            </u-table-column>
            <u-table-column align="left" label="类型" min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.flowType | flowType }}</span>
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="left" label="流水单号" min-width="120" prop="flowNumber">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.flowNumber"/>
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="right" label="无需核销金额(元)" min-width="160" prop="noWriteOffAmount">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.noWriteOffAmount" :price="scope.row.noWriteOffAmount / 100" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="所属部门" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.departmentName" />
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="left" label="封账月份" min-width="100" prop="sealMonth">
              <template slot-scope="scope">
                <span>{{ scope.row.sealMonth || '--' }}</span>
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.createName" />
              </template>
            </u-table-column>
            <u-table-column :sortable="isAllTab ? 'custom' : false" align="left" label="创建时间" min-width="140" prop="createTime">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm') }}</span>
              </template>
            </u-table-column>
          </u-table>
          <div v-else style="margin-bottom: 24px;text-align: center;">
            <empty-placeholder
              :text="emptyText"
              :empty-img="emptySearchImg"
              :class="{ 'showy-text': isAllTab }"
              image-size="140px"
              text-color="#999" />
            <div v-if="isAllTab" style="color: #999; font-size: 14px; margin-top: 6px">智能提示：切换至【不可见流水】可搜索无权限查看的流水噢~</div>
          </div>
        </div>
        <fixed-pagination v-if="isAllTab || isOtherTab" class="bottom-pagination">
          <div class="delete-button-container">
            <template>
              <el-button :disabled="selectedData.length === 0" size="small" type="primary" class="related-btn" @click="confirm">关联流水</el-button>
              <el-button size="small" plain type="prsingleSelectimary" class="related-btn" @click="onBackClick">返回</el-button>
            </template>
          </div>
          <el-pagination
            v-if="isAllTab || isOtherTab"
            v-show="(isAllTab && list.total > 0) || (isOtherTab && otherList.total > 0)"
            :current-page="isAllTab ? list.page : otherList.page"
            :page-size="isAllTab ? list.perPage : otherList.perPage"
            :total="isAllTab ? list.total : otherList.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </fixed-pagination>
        <fixed-pagination v-if="curTabName == 'selected'" class="bottom-pagination">
          <div class="delete-button-container">
            <el-button :disabled="selectedData.length === 0" size="small" type="primary" class="related-btn" @click="confirm">{{ confirmText }}</el-button>
            <el-button size="small" plain type="primary" class="related-btn" @click="onBackClick">返回</el-button>
          </div>
          <el-pagination
            v-show="selectedData.length > 0"
            :current-page="selectedPage"
            :page-size="selectedPerPage"
            :total="selectedData.length"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </fixed-pagination>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getList } from '@/api/finance';
import { getDepartmentAll } from '@/api/config';
import { getPayOption } from '@/api/select';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import FilterInput from '@/components/Tool/filter';
import searchIcon from '@/assets/search-resource.png';
import resetFilterIcon from '@/assets/setting/resetFilter.png';
import emptySearchImg from '@/assets/empty-search.png';
import axios from 'axios';
import { verificationOptions } from '@/views/project/model/selectData';
import { clientStatusFilter, setVerificationState, setSealBillType } from '@/filters/status';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  name: 'RelatedContract',
  components: {
    FilterInput,
    EmptyPlaceholder
  },
  filters: { setVerificationState, setSealBillType, standardFormat,
    flowType(val) {
      // 流水类型。0:普通 1:对抵
      return {
        0: '普通',
        1: '对抵'
      }[val];
    }
  },
  mixins: [tableSelections, TableAdaptive],
  props: {
    title: {
      type: String,
      default: '选择流水'
    },
    multiple: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确认选择'
    },
    expandParams: {
      type: Object,
      default: null
    },
    issueId: { // 开票申请id
      type: Number | String,
      default: null
    }
  },
  data() {
    return {
      searchIcon,
      resetFilterIcon,
      emptySearchImg,
      isInit: true,
      filterInput: {},
      page: 1,
      perPage: 20,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0
      },
      otherPage: 1,
      otherPerPage: 20,
      otherList: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0
      },
      selectedPage: 1,
      selectedPerPage: 20,
      sortType: '',
      sortName: '',
      listLoading: false,
      idKey: 'id', // 多选框参数
      isUmyTable: true,
      tableRefName: 'dayAccountTable',
      curTabName: 'all',
      selectedData: [],
      updateId: null,
      cancelToken: null,
      sortObj: {},
      paramsObj: {},
      otherParams: {
        clientName: '',
        incomeAmount: null
      },
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createStart',
        end: 'createEnd',
        type: 'time'
      }, {
        attr: 'arrivalTime',
        start: 'arrivalStartTime',
        end: 'arrivalEndTime',
        type: 'time'
      }, {
        attr: 'incomeAmount',
        start: 'incomeAmountStart',
        end: 'incomeAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'noWriteOffAmount',
        start: 'noWriteOffAmountStart',
        end: 'noWriteOffAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'chargeAmount',
        start: 'chargeAmountStart',
        end: 'chargeAmountEnd',
        type: 'moneyFixed'
      }, {
        attr: 'sealMonth',
        start: 'sealMonthStart',
        end: 'sealMonthEnd',
        type: 'time'
      }],
      sealingStateOption: [
        { value: -1, label: '全部' },
        { value: 0, label: '待封账' },
        { value: 1, label: '已封账' },
        { value: 2, label: '封账中' }
      ],
      payOption: [],
      clientTypeOption: [{ value: 0, label: '公司' }, { value: 1, label: '个人' }],
      departmentList: [],
      verificationOptions,
      otherText: '',
      exactForClientName: 0
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAllTab() {
      return this.curTabName === 'all';
    },
    isOtherTab() {
      return this.curTabName === 'other';
    },
    isSelectedTab() {
      return this.curTabName === 'selected';
    },
    searchOtherDisabled() {
      const { clientName, incomeAmount, arrivalTime } = this.otherParams;
      return !clientName || !incomeAmount || !arrivalTime;
    },
    filterList() {
      const baseFilterList = [
        { keyword: 'clientName', name: '付款人名称', type: 'input', labelWidth: '96px' },
        { keyword: 'payName', name: '付款账号', type: 'input' },
        { keyword: 'transactionNumber', name: '交易单号', type: 'input', labelWidth: '96px' },
        { keyword: 'flowNumber', name: '流水单号', type: 'input' },
        { keyword: 'createName', name: '创建人', type: 'input', labelWidth: '96px' },
        { keyword: 'remark', name: '备注', type: 'input' },
        { keyword: 'incomeAmount', name: '收入金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'chargeAmount', name: '可核销金额', type: 'inputRange' },
        { keyword: 'noWriteOffAmount', name: '无需核销金额', type: 'inputRange', labelWidth: '96px' },
        { keyword: 'sealingState', name: '封账状态', type: 'select', options: this.sealingStateOption },
        { keyword: 'payType', name: '付款方式', type: 'select', options: this.payOption, labelWidth: '96px' },
        { keyword: 'clientType', name: '付款人类型', type: 'select', options: this.clientTypeOption },
        { keyword: 'departmentId', name: '所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children', options: this.departmentList },
        { keyword: 'flowType', name: '类型', type: 'select', options: [{ value: 0, label: '普通' }, { value: 1, label: '对抵' }] },
        { keyword: 'relatedInvoice', name: '发票关联状态', type: 'select', options: [{ value: 0, label: '待关联' }, { value: 1, label: '已关联' }] },
        { keyword: 'createTime', name: '创建时间', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd' },
        { keyword: 'arrivalTime', name: '到账日期', type: 'rangeDate', timeType: 'daterange', format: 'yyyy/MM/dd', labelWidth: '96px' },
        { keyword: 'sealMonth', name: '封账月份', timeType: 'monthrange', type: 'rangeDate', format: 'yyyy/MM' }
      ];
      const verificationFilterItem = { keyword: 'verificationState', name: '核销状态', type: 'mulSelect', options: this.verificationOptions };
      const cloneBaseFilterList = _.cloneDeep(baseFilterList);
      cloneBaseFilterList.splice(8, 0, verificationFilterItem);
      return cloneBaseFilterList;
    },
    selectedTableData() {
      return this.selectedData.slice((this.selectedPage - 1) * this.selectedPerPage, this.selectedPage * this.selectedPerPage);
    },
    tableOutsideHeight() {
      return this.showMobilePage ? this.isAllTab ? 236 : 368 : 210;
    },
    searchTip() {
      return '同时精准搜索 "付款人名称" + "收入金额" + "到账日期"，即可查找无权限查看的流水';
    },
    emptyText() {
      if (this.isAllTab) {
        return '找不到流水，请换个关键词搜索';
      } else if (this.isOtherTab) {
        return this.otherText || this.searchTip;
      }
      return '暂无数据';
    }
  },
  watch: {
    'otherParams': {
      handler(val) {
        if (!val.clientName && !val.incomeAmount) {
          this.otherText = this.searchTip;
        }
      },
      deep: true
    }
  },
  created() {
    this.getPaySelect();
    this.getDepartment();
    // this.init();
  },
  methods: {
    clientStatusFilter,
    // 初始获取数据
    init(data, exactForClientName) {
      this.curTabName = 'all';
      if (data) this.$set(this.paramsObj, 'clientName', data.clientName);
      if (exactForClientName) {
        this.exactForClientName = 1;
      }
      this.fetchData();
    },
    handleOtherEnter() {
      if (!this.searchOtherDisabled) {
        this.handleOtherSearch();
      }
    },
    resetOtherSearch() {
      this.otherParams = {
        clientName: '',
        incomeAmount: null
      };
      this.otherList = {
        items: [],
        page: 1,
        perPage: 20,
        total: 0
      };
    },
    // 获取付款方式
    async getPaySelect() {
      try {
        const result = await getPayOption();
        if (result.code === 200) {
          result.data.forEach(i => {
            i.value = i.id;
            i.label = i.name;
          });
          this.payOption = result.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取所属部门
    getDepartment() {
      getDepartmentAll().then(res => {
        this.departmentList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 切换列表tab
    checkSelectTab() {
      if (this.isAllTab) {
        this.fetchData();
      } else if (this.isOtherTab) {
        this.handleOtherEnter();
      } else {
        this.setSelectRow(this.selectedTableData);
      }
    },
    queryClick() {
      if (this.isSelectedTab) this.curTabName = 'all';
      this.fetchData(true);
    },
    queryEmpty() {
      this.sortType = '';
      this.sortName = '';
      this.paramsObj = {};
      this.queryClick();
    },
    // 参数处理
    formatParams() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(['verificationState', 'departmentIdList', 'departmentId'], params);
      /* if (!this.$route.query.createNew) { // 再次发起（复制）时不统计关联流水
        params.isCountInvoiceApply = 1;
      } */
      params.sortName = this.sortName;
      params.sortType = this.sortType;
      params.exactForClientName = this.exactForClientName;
      params.isCountInvoiceApply = 1;
      if (Number(this.issueId) > 0 && !this.$route.query.createNew) {
        params.filterInvoiceApplyId = this.issueId;
      }
      return params;
    },
    // 获取列表数据
    fetchData(reset = false) {
      try {
        if (reset) this.page = 1;
        this.listLoading = true;
        const params = this.formatParams();
        if (this.cancelToken) this.cancelToken.cancel('cancel');
        const source = axios.CancelToken.source();
        this.cancelToken = source;
        getList(this.page, this.perPage, params, source.token).then(({ data }) => {
          this.list = data;
          /* if (this.updateId) {
            this.updateItem();
          } */
          this.listLoading = false;
          if (!this.isSelectedTab) this.setSelectRow(data.items);
        }, () => {
          this.listLoading = false;
        }).catch(e => {
          console.error(e);
        });
      } catch (error) {
        console.log(error);
      }
    },
    handleOtherSearch() {
      this.listLoading = true;
      const params = _.cloneDeep(this.otherParams);
      params.isOther = true;
      params.arrivalStartTime = params.arrivalTime / 1000;
      params.arrivalEndTime = params.arrivalTime / 1000;
      delete params.arrivalTime;
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();
      this.cancelToken = source;
      getList(this.otherPage, this.otherPerPage, params, source.token).then(({ data }) => {
        this.otherList = data;
        this.listLoading = false;
        this.otherText = '必须付款人名称与收入金额精准匹配到流水，请确认后再搜索';
        if (!this.isSelectedTab) this.setSelectRow(data.items);
      }, () => {
        this.listLoading = false;
      }).catch(e => {
        console.error(e);
      });
    },
    // 翻页
    handleSizeChange(val) {
      if (this.curTabName === 'all') {
        this.perPage = val;
        this.fetchData(true);
      } else if (this.curTabName === 'other') {
        this.otherPerPage = val;
        this.handleOtherSearch();
      } else if (this.isSelectedTab) {
        this.selectedPerPage = val;
        // this.setSelectRow(this.selectedTableData.items);
        this.setSelectRow(this.selectedTableData);
      }
    },
    handleCurrentChange(toPage) {
      if (this.curTabName === 'all') {
        this.page = toPage;
        this.fetchData();
      } else if (this.curTabName === 'other') {
        this.otherPage = toPage;
        this.handleOtherSearch();
      } else if (this.isSelectedTab) {
        this.selectedPage = toPage;
        this.setSelectRow(this.selectedTableData);
      }
    },
    // 确认关联流水
    confirm() {
      this.$emit('confirm', this.selectedData);
      this.onBackClick();
    },
    // 关闭弹窗
    onBackClick() {
      this.$refs.drawerBox.closeDrawer();
    },
    addSort(obj) {
      this.sortObj = obj;
      this.fetchData(true);
    },
    initSelectData(data = []) {
      this.selectedData = data;
      this.multipleSelectionAll = data;
    },
    updateItem() {
      const item = this.list.items.filter(el => el.id === this.updateId)[0];
      this.$emit('updateItem', item);
      this.updateId = null;
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      if (this.curTabName === 'all') {
        this.fetchData();
      }
    },
    btnCheck(scope) {
      const routerData = {
        name: 'chargeOffDetail',
        params: { chargeOffId: scope.row.id }
      };
      const url = this.$router.resolve(routerData);
      window.open(url.href, '_blank');
    },
    getPayWay(row) {
      const clientType = this.clientStatusFilter(row.clientType);
      return row.payWayStr ? clientType + ' / ' + row.payWayStr : clientType;
    },
    // 保留数据
    tableSelectionChange(selection) {
      this.selectedData = selection;
      if (this.isSelectedTab) this.setSelectRow(this.selectedTableData);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header {
  height: 48px;
  padding: 0 12px 0 24px;
  margin: 0;
  box-shadow: 2px 4px 5px 0 rgba(221,225,234,0.3);
  display: flex;
  align-items: center;
  > span {
    font-size: 14px;
    color: #333;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0 !important;
  }
}
::v-deep .el-tabs__header {
  margin: 0;
  border: none;
}
::v-deep .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 48px;
}
::v-deep .el-drawer__header>span{
  font-size: 16px;
}
::v-deep .el-badge__content{
  background: #FB5227;
}
::v-deep .el-badge__content{
  transform: translateY(5px);
}
.tip {
  color: #999;
  font-size: 13px;
  margin-left: 20px;;
}
.drawer-content {
  padding: 22px 24px 0;
  overflow-y: auto;
  &::v-deep {
    .el-form {
      height: 32px;
    }
    .el-form-item {
      margin-bottom: 0;
      margin-right: 28px;
    }
  }
  .table-list {
    &::v-deep {
     .el-table__header {
        .el-checkbox__inner {
          position: relative;
          left: -2px;
        }
      }
    }
    border-radius: 10px;
    .el-row {
      padding: 0;
    }
    .delete-button-container {
      flex:1;
      height: 32px;
      display: flex;
      align-items: center;
      .related-btn {
        margin-left: 20px;
        padding-left: 12px;
        padding-right: 12px;
      }
    }
    ::v-deep .pagination-flex {
      position: absolute;
      width: 100% !important;
    }
  }
  .showy-text {
    ::v-deep .empty-text {
      font-size: 16px;
      color: #333 !important;
      font-weight: bold;
    }
  }
}
::v-deep .el-tabs__nav-wrap::after {
  z-index: -1;
}
::v-deep .el-tabs__active-bar {
  bottom: 1px;
}
.detail-tabs-container {
  &::v-deep {
    .el-tabs__header  {
      margin-bottom: 0 !important;
      border-bottom: 1px solid #ddd;
      .el-tabs__nav {
        border: none !important;
      }
      .el-tabs__item {
        padding: 0 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        margin-right: 8px;
        border: 1px solid #ddd;
        border-radius: 4px 4px 0px 0px;
        color: #333;
        background: #f7f8fa;
        font-size: 16px;
        &:last-child {
          margin-right: 0px;
        }
        &.is-active {
          border-bottom-color: #FFFFFF !important;
          font-weight: bold;
          background: #fff;
          color: #406eff;
        }
      }
    }
  }
}
.mobile-top-filter {
  height: auto !important;
  ::v-deep {
    .el-form-item__label {
      width: 82px;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 24px;
    }
    .el-form-item:last-child {
      margin-bottom: 0;
    }
    .el-input__inner, .el-input {
      width: 180px !important;
    }
  }
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.width120 {
  width: 120px;
  &::v-deep {
    .el-input__inner {
      width: 120px;
      padding-right: 8px;
    }
  }
}
</style>
